<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>选择推荐的位置</title>
    <link rel="stylesheet" href="http://www.kuibutech.com/editorJfinalProject/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://www.kuibutech.com/editorJfinalProject/css/common.css" type="text/css"/>
    <link rel="stylesheet" href="http://www.kuibutech.com/editorJfinalProject/css/jquery.Jcrop.css" type="text/css"/>
    <link type="text/css" rel="stylesheet" href="http://www.kuibutech.com/editorJfinalProject/css/recomStyle.css">
    <script type="text/javascript" src="http://www.kuibutech.com/editorJfinalProject/js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://www.kuibutech.com/editorJfinalProject/js/jquery.Jcrop.js"></script>
    <style type="text/css">
        .crop_preview {
            position: absolute;
            left: 500px;
            top: 0;
            width: 200px;
            height: 133px;
            overflow: hidden;
        }

        .rel {
            width: 750px;
            height: 600px;
            margin: 0px;
            overflow: hidden;
        }
    </style>
    <script>
        $(document).ready(function () {
            //记得放在jQuery(window).load(...)内调用，否则Jcrop无法正确初始化
            $("#aa").Jcrop({
                aspectRatio: 1.5,
                onChange: showCoords,
                onSelect: showCoords,
                /*设置初始选框的大小*/
                setSelect: [0, 0, 480, 320],
            });

            //简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
            function showCoords(obj) {
                var width = $("#imgWidth").text();
                $("#x").val(Math.round(obj.x * width/480));
                $("#y").val(Math.round(obj.y * width/480));
                $("#w").val(Math.round(obj.w * width/480));
                $("#h").val(Math.round(obj.h * width/480));
                if (parseInt(obj.w) > 0) {
                    //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
                    var rx = $("#preview_box").width() / obj.w;
                    var ry = $("#preview_box").height() / obj.h;
                    //通过比例值控制图片的样式与显示
                    $("#crop_preview").css({
                        //预览图片宽度为计算比例值与原图片宽度的乘积
                        width: Math.round(rx * $("#aa").width()) + "px",
                        //预览图片高度为计算比例值与原图片高度的乘积
                        height: Math.round(rx * $("#aa").height()) + "px",
                        marginLeft: "-" + Math.round(rx * obj.x) + "px",
                        marginTop: "-" + Math.round(ry * obj.y) + "px"
                    });
                }
            }

            $("#crop_submit").click(function () {
                $("#crop_form").submit();
            });

            $("#file").change(function(){
                $("#newpic").submit();
            });

        });
    </script>
</head>
<body>

<div class="tupian">

    <div class="rel" style="float:left;">
        <img id="aa" src="${imageSource}" width="60%"/>
        <span id="preview_box" class="crop_preview"><img id="crop_preview" src="${imageSource}" width="100%"/></span>
        <br>
    </div>

    <div style="float: left;width: 20%;">
        <form action="/editorJfinalProject/recom/cutNewImage" method="post" id="crop_form">
            <input type="hidden" id="x" name="x"/>
            <input type="hidden" id="y" name="y"/>
            <input type="hidden" id="w" name="w"/>
            <input type="hidden" id="h" name="h"/>
            <input type="hidden" id="recomPos" name="recomPos" value="${recomPos}"/>
            <input type="hidden" name="pageId" value="${pageId}"/>
            <input type="hidden" name="imageId" value="${imageId}"/>
            <input type="hidden" name="src" value="${imageSource}"/>
            <%--<input type="hidden" id="picPath" name="localPicPath" value="${localPicPath}"/>--%>
        </form>
        <div>
            <div>
                <label style="color: red;font-size: 20px;">这里可以上传新图片：</label>
            </div>
            <div style="margin-top: 30px;width: 200px">
                <form id="newpic" action="/editorJfinalProject/recom/uploadNewTitleImage" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="pageId" value="${pageId}"/>
                    <input type="hidden" name="imageId" value="${imageId}"/>
                    <input type="hidden" name="type" value="2">
                    <input type="hidden" id="recomPos" name="recomPos" value="${recomPos}"/>
                    <input id="file" type="file" style="width: 190px;height: 25px;" name="titleImage">
                    <%--<button id="subnewpic" style="width: 100px">更改图片</button>--%>

                </form>

                <%--<button id="subnewpic" style="width: 100px">更改图片</button>--%>
            </div>
            <div>
                    <span><input type="button" style="margin-top:100px;width: 200px;height: 60px;" class="btn-primary"
                                 value="裁剪完毕" id="crop_submit"/></span>
            </div>
        </div>

        <span id="imgHeight"></span>
        <span id="imgWidth"></span><br>

    </div>

</div>

<script>
    var img_url = $("#aa").attr('src');

    // 创建对象
    var img = new Image();

    // 改变图片的src
    img.src = img_url;

    // 加载完成执行
    img.onload = function(){
        // 打印
        $("#imgHeight").text(img.height);
        $("#imgWidth").text(img.width);
    };
</script>
</body>
</html>